<script setup>
const notice = ({
  msg: "欢迎您的到来，如果在使用过程中发现bug，麻烦请及时向拾壹反馈。如果本项目对你有帮助，请前往<a href=\"https://gitee.com/\">码云</a>给仓库点上您的小星星"
});
const closeMsg = () => {
};
</script>

<template>
  <div class="notice">
    <marquee ref="notice" behavior="scroll" direction="left" scrollamount="6">
      <span class="msg">
        <span class="title">
          <img class="svg-icon" src="@/icons/svg/topNotice.svg" alt="">公告：
        </span>
        <span class="content" v-html="notice.msg"></span>
        <span class="closeBtn" @click="closeMsg">
          关闭 <i class="el-icon-close"></i>
        </span>
      </span>
    </marquee>
  </div>
</template>

<style scoped lang="less">
.notice {
  position: relative;
  width: 100%;
  height: 30px;
  overflow: hidden;
  line-height: 30px;
  background: var(--background);
  transition: all 0.5s linear;

  .msg {
    line-height: 30px;
    font-size: 14px;
    font-weight: 700;

    .title {
      margin-right: 15px;
    }
  }

  .content {
    /deep/ a {
      text-decoration: none;
      color: red;
    }
  }

  .closeBtn {
    cursor: pointer;
    margin-left: 15px;
    font-weight: 400;
  }
}
</style>